<script setup>
import { reactive, ref, computed, watch } from 'vue'
//获取到的结果
// correctionText
import { correctionText } from "@/api/utils/chat";
const answer = reactive({
    // 用取消支，并踹了王俨一脚，王振俨乱叫唤
    "text": `用取消支，并踹了王俨一脚，王振俨乱叫唤`,//输入框内输入的文本信息
    "code": 0,
    "type": ['黑名单', '符号错误', '冗余', '领导人职称错误', '机构名字错误', '政治术语错误',
        '句式杂糅', '字级乱序', '成语错误', '别词错误', '别字错误',
        '缺失错误', '搭配错误', '时间格式错误', '地名错误', '人名错误'],
    //[修改后文本的位置，原文本，纠错后文本，类型]
    "result": {
        "black_list": [],
        "punc": [[4, ',', '', 'punc']],//符号错误
        "redund": [[7, '了', '', 'redund']],//冗余错误
        "leader": [],
        "org": [],
        "pol": [],
        "grammar_pc": [],
        "order": [],
        "idm": [],
        "word": [],
        "char": [],
        "miss": [],
        "dapei": [],
        "number": [],
        "addr": [],
        "name": []
    }
})

const replaceStr1 = (str, index, char) => {
    const strAry = str.split('');
    strAry[index] = char;
    return strAry.join('');
}

let str = ref('')
let arrStr = []
for (let k in answer.result) {


    answer.result[k].forEach(item => {
        console.log(item, '==item')
        if (item.length > 0) {
            item.forEach(index => {
                console.log(index, '==item')

                if (!answer.text[index]) return

                const startTag = `<span class="error-highlight" style="background-color: #ff0000; color: #fff;">${answer.text[index]}</span>`




                str.value += replaceStr1(
                    answer.text, index, startTag
                )

                console.error(str.value)
            })
        }
    })

}




// 合并所有错误类型，形成一个数组
const allErrors = [
    ...answer.result.black_list,
    ...answer.result.punc,
    ...answer.result.leader,
    ...answer.result.org,
    ...answer.result.pol,
    ...answer.result.grammar_pc,
    ...answer.result.order,
    ...answer.result.idm,
    ...answer.result.word,
    ...answer.result.char,
    ...answer.result.redund,
    ...answer.result.miss,
    ...answer.result.dapei,
    ...answer.result.number,
    ...answer.result.addr,
    ...answer.result.name
];
// console.log(allErrors);

//对获取到的数据进行处理——
function generateHighlightedText(answer) {
    let text = answer.text || '';

    // 根据错误位置排序
    allErrors.sort((a, b) => a[0] - b[0]);

    allErrors.forEach(item => {
        let [position, original, corrected, type] = item;
        //高亮的标签
        // const startTag = `<span class="error-highlight" style="background-color: #ff0000; color: #fff;">`;
        // const endTag = `</span>`;

        // 对原始文本和更正后文本进行 HTML 实体转义
        const escapedOriginal = escapeHtml(original);
        const escapedCorrected = escapeHtml(corrected);
        console.log(original, 'original')


        console.log(escapedOriginal, 'escapedOriginal')

        console.log(corrected, 'corrected')
        console.log(escapedCorrected, 'escapedCorrected')
        // text内改为修正后的文本
        if (text != '') {

            const startTag = `<span class="error-highlight" style="background-color: #ff0000; color: #fff;">${escapedCorrected}</span>`;
            console.log(startTag)
            // text = text.substring(0, position) + startTag + escapedCorrected + endTag + text.substring(position + escapedOriginal.length);
            text = text.substring(0, position) + escapedCorrected + text.substring(position + escapedOriginal.length);
        } else {
            text = ''
        }
    });

    return text;
}
function coText() {
    alert(answer.text)
    correctionText(answer.text).then(response => {
        // 遍历所有的数组
        for (const key in response) {
            if (response.hasOwnProperty(key) && key !== 'code' && key !== 'type' && key !== 'text') {
                answer.result[key] = response[key];
            }
        }
        alert(response)
        console.log(response)
    })
}


// HTML 实体转义函数——防止出现XSS漏洞
function escapeHtml(text) {
    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

// 计算错别字的数量——即整体错误数组的长度
function countErrors(result) {
    return allErrors.length;
}

// 计算属性，计算剩余的字数
const maxlength = ref(500)//输入框最大字数
const remainingChars = computed(() => {
    return maxlength.value - answer.text.length;
});

// 当文本框内容变化时，更新剩余字数
const updateCharCount = () => {
    // 这里可以执行其他操作，比如验证文本长度等
};

const activeNames = ref(['1'])
const handleChange = (val) => {
    console.log(val)
}
</script>

<template>
    <el-row style="padding-right: 15px;">
        <el-col :span="20">
            <el-card style="margin: 15px;height: 85vh;">
                <div class="ai-module-demo-container">
                    <div class="tech-recognition" images="" videos="">

                        <h3 v-html="str"></h3>
                        <div class="ai-container">
                            <div class="corrector">
                                <div class="mid-down-title">
                                    <span class="down-title-des">请输入一段想纠错的文本：</span>
                                    <!-- <span class="com-click">随机示例</span> -->
                                </div>
                                <div class="mid-input">
                                    <div class="glass-model">
                                        <div class="mid-form-cover">
                                            <div class="com-txt">
                                                <textarea v-model="answer.text" spellcheck="false"
                                                    :maxlength="maxlength" placeholder="请输入纠错文本" class="com-txt-area"
                                                    @input="updateCharCount"></textarea>
                                            </div>
                                            <div class="ed-form-down">
                                                <span class="ed-down-tips">
                                                    还可以输入<span class="ed-tips-in">{{ remainingChars }}</span>个字
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="msg-tip" style="display: none;">文本解析中...</div>
                                    <div class="msg-tip" style="display: none;">
                                        很抱歉，文本中可能存在敏感内容,请<span class="retry">重新输入</span>。
                                    </div>
                                </div>
                                <div class="mid-btn">
                                    <el-button class="mid-btn-span" @click="coText">
                                        开始纠错
                                    </el-button>
                                </div>
                                <div class="demo-result">
                                    <div class="demo-result-title">纠错结果</div>
                                    <div class="demo-result-body" v-html="generateHighlightedText(answer)">

                                    </div>
                                    <div class="demo-result-tips">
                                        该文本中有<span class="ed-tips-in">{{ countErrors(answer.result) }}</span>处错别字，已高亮显示
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card style="margin-top: 15px;height: 85vh;">
                <div class="demo-right" style="height: 80vh;">
                    <div class="result-title">
                        <div>识别结果</div>
                        <div class="error-num-tip" style="text-align: right;">
                            共
                            <span style="color: red;">{{ countErrors(answer.result) }}</span>
                            处错误
                        </div>
                    </div>
                    <div class="result-detail" style="height: 100%;">
                        <el-collapse v-model="activeNames" @change="handleChange">
                            <el-col :AAAq="'errors' + errors + '-category-' + category + '-outerIndex-' + outerIndex"
                                :span="24" v-for="(errors, category, outerIndex) in answer.result" :key="category">
                                <!-- <h1>1111----{{ errors }}--outerIndex-{{ outerIndex }}</h1> -->
                                <el-collapse-item :title="answer.type[outerIndex]" :name="category"
                                    v-if="errors.length > 0">

                                    <div class="class-item-detail">
                                        <div v-for="(item, innerIndex) in errors" :key="innerIndex" class="error-item">

                                            <!-- <div> innerIndex - {{ innerIndex }}</div> -->
                                            <template v-if="outerIndex === 1">
                                                <span class="original-text">
                                                    第{{ item[0] }}位符号出现错误
                                                </span>
                                            </template>
                                            <template v-else-if="outerIndex == 2">
                                                <span class="original-text">
                                                    冗余内容: {{ item[1] }}
                                                </span>
                                            </template>
                                            <template v-else>
                                                <span class="original-text">{{ item[1] }}</span> ->
                                                <span class="corrected-text">{{ item[2] }}</span>
                                            </template>
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-col>
                        </el-collapse>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>



<style scoped>
.ai-module-demo-container {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* margin-top: 40px; */
}

.tech-recognition {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.ai-container {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.corrector {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    /* // */
    margin: 0 auto;
    font-family: Microsoft YaHei;
}

.mid-down-title {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    margin-bottom: 20px;
}

.down-title-des {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    font-size: 18px;
    color: #000;
}

.com-click {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 2px;
    color: #3d9cff;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #3d9cff;
}

.mid-input {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: relative;
}

.glass-model {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    height: 100%;
}

.mid-form-cover {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: relative;
    background-color: #fff;
}

.com-txt {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: relative;
    z-index: 2;
    display: block;
    /* width: 1180px; */
    width: 100%;
    height: 200px;
    padding: 30px 0 64px 30px;
    background-color: transparent;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.com-txt-area {
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 24px;
    /* width: 1128px; */
    width: 100%;
    height: 100%;
    color: #666;
    border: none;
    outline: 0;
    resize: none;
    padding: 0 20px 0 0;
}

.ed-form-down {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: absolute;
    left: 30px;
    bottom: 20px;
    height: 24px;
}

.ed-down-tips {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    font-size: 14px;
    color: #999;
}

.ed-tips-in {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    font-size: 14px;
    margin: 0 2px;
    color: #ff851a;
}

.msg-tip {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 32px;
    width: fit-content;
    height: 36px;
    line-height: 36px;
    color: #666;
    background: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .15);
    border-radius: 4px;
    display: none;
}

.retry {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    line-height: 36px;
    color: #1a73e8;
    cursor: pointer;
}

.mid-btn {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    padding: 30px 0;
    text-align: center;
}

.mid-btn-span {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    text-align: center;
    color: #036de2;
    border: 1px solid #036fe2;
    cursor: pointer;
    display: inline-block;
    margin: 0 auto;
    box-sizing: border-box;
    width: 180px;
    height: 54px;
    /* line-height: 54px; */
    font-size: 18px;
}

.demo-result {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: relative;
    height: 200px;
    box-sizing: border-box;
    border: 1px solid #eee;
    padding: 56px 26px 42px 30px;
}

.demo-result-title {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: absolute;
    left: 30px;
    top: 20px;
    color: #000;
    font-weight: 700;
}

.demo-result-body {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    color: #666;
    line-height: 24px;
}


.error-highlight {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    line-height: 24px;
    background: #036fe2;
    color: #fff;
}

.demo-result-tips {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: absolute;
    left: 30px;
    bottom: 20px;
    color: #999;
}

.ed-tips-in {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    margin: 0 2px;
    color: #ff851a;
}



/* 右侧错误信息返回 */
.demo-right {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    padding: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* background-color: #f8f8f8; */
    color: #2b3e54;
}

.result-title {
    font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53";
    color: #2b3e54;
    /* display: flex;
    flex: 1; */
    justify-content: space-between;
    padding-right: 20px;
    margin-bottom: 10px;
    font-size: 16px;
}

.error-num-tip {
    font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53";
    color: #2b3e54;
    font-size: 16px;
}

.result-detail {
    font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53";
    color: #2b3e54;
    overflow: auto;
}

.result-class {
    font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53";
    color: #2b3e54;
    font-size: 14px;
    line-height: 1.5;
}

.class-title {
    font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53";
    color: #2b3e54;
    font-size: 14px;
    line-height: 1.5;
    padding: 6px 0;
    cursor: pointer;
    user-select: none;
}

.anticon anticon-caret-right {
    font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53";
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    margin-right: 10px;
}

.class-item-detail {
    font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53";
    color: #2b3e54;
    font-size: 14px;
    /* line-height: 1.5; */
    display: block;
    background-color: #fff;
}

.result-item {
    font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53";
    color: #2b3e54;
    font-size: 14px;
    line-height: 1.5;
    padding: 6px;
    border-bottom: 1px solid #e6e8f4;
    cursor: pointer;
}

.error-position {
    font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53";
    color: #2b3e54;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}
</style>
